<template>
  <base-breadcrumb :title="$route.meta.title">
    <!-- 点位重构 -->
    <div id="base-breadcrumb" style="position: relative">
      <!-- 项目信息 -->
      <a-card :bordered="false" class="mb20">
        <title-name title="项目信息"></title-name>
        <a-form-model ref="ruleForm" :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :rules="rules">
          <a-row>
            <a-col :xs="24" :sm="12" :md="8" :lg="8">
              <a-form-model-item label="分公司名称" prop="branchCompanyId">
                <BaseInput disabled placeholder="请选择" v-model="form.branchCompanyName"></BaseInput>
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="12" :md="8" :lg="8">
              <a-form-model-item label="项目名称" prop="projectId">
                <BaseInput disabled placeholder="请选择" v-model="form.projectName"></BaseInput>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :xs="24" :sm="24" :md="24" :lg="24">
              <a-form-model-item
                :label-col="{ span: 2 }"
                :wrapper-col="{ span: 6 }"
                label="项目基本情况"
                prop="projectBasicSituation"
              >
                <BaseInput
                  :maxLength="300"
                  type="textarea"
                  :disabled="editModel == 0"
                  v-model="form.projectBasicSituation"
                ></BaseInput>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-card>
      <!-- 表格 -->
      <a-card :bordered="false" style="margin-bottom: 80px">
        <title-name title="新六项措施实施计划"></title-name>
        <div>
          <s-table
            ref="table"
            tableLayout="fixed"
            size="default"
            :rowKey="(record) => record.id"
            :columns="columns"
            :data="loadData"
            :alert="true"
            :showPagination="false"
          >
            <!-- 实施部位 -->
            <div slot="implementationSite" slot-scope="text, record">
              <div class="table-item" v-if="editModel != 0">
                <BaseInput :maxLength="30" v-model="record.implementationSite"></BaseInput>
              </div>
              <div v-else>{{ record.implementationSite }}</div>
            </div>
            <!-- 实施要点 -->
            <div slot="implementationPoints" slot-scope="text, record">
              <div class="table-item" v-if="editModel != 0">
                <BaseInput :maxLength="30" v-model="record.implementationPoints"></BaseInput>
              </div>
              <div v-else>{{ record.implementationPoints }}</div>
            </div>
            <!-- 实施时间 -->
            <div slot="implementationTime" slot-scope="text, record">
              <!-- :default-value="[moment(record.implementationTimeStart, 'YYYY-MM'), moment(record.implementationTimeEnd, 'YYYY-MM')]" -->
              <a-form-model :ref="`ruleForm_${record.id}`" :model="record" :rules="rules">
                <div class="table-item">
                  <a-form-model-item prop="implementationTime" style="margin: 0">
                    <a-range-picker format="YYYY-MM" v-if="editModel != 0" v-model="record.implementationTime" />
                    <div v-else>{{ record.implementationTimeStart + '~' + record.implementationTimeEnd }}</div>
                  </a-form-model-item>
                </div>
              </a-form-model>
            </div>
            <!-- 责任人 -->
            <div slot="dutyPeopleId" slot-scope="text, record">
              <div class="table-item" v-if="editModel != 0">
                <a-select v-model="record.dutyPeopleId">
                  <a-select-option value="jack">Jack</a-select-option>
                  <a-select-option value="lucy">Lucy</a-select-option>
                  <a-select-option value="tom">Tom</a-select-option>
                </a-select>
              </div>
              <div v-else>{{ record.dutyPeopleName }}</div>
            </div>
            <!-- 备注 -->
            <div style="padding-right: 10px" slot="remarks" slot-scope="text, record">
              <div class="table-item" v-if="editModel != 0">
                <BaseInput :maxLength="30" v-model="record.remarks"></BaseInput>
              </div>
              <div v-else>{{ record.remarks }}</div>
            </div>
          </s-table>
        </div>
      </a-card>
      <!-- 页脚操作栏 -->
      <div
        class="btn_box page-btn-right-top"
        style="position: fixed; bottom: 0; right: 50px; height: 50px; display: flex; align-items: center"
      >
        <a-button :loading="loading" v-if="editModel" type="primary" class="button_right" @click="handleSubmit"
          >提交</a-button
        >
        <a-button type="primary" @click="$multiTab.close()">关闭</a-button>
      </div>
    </div>
  </base-breadcrumb>
</template>

<script>
import { STable } from '@/components' // 表格
import { sixMeasures } from '@/api/quality/quality' // api
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import cloneDeep from 'lodash.clonedeep' // 深拷贝
const columns = [
  {
    title: '六项举措内容',
    dataIndex: 'sixMeasures',
  },
  {
    title: '实施部位',
    dataIndex: 'implementationSite',
    scopedSlots: { customRender: 'implementationSite' },
  },
  {
    title: '实施要点',
    dataIndex: 'implementationPoints',
    scopedSlots: { customRender: 'implementationPoints' },
  },
  {
    title: '实施时间',
    dataIndex: 'implementationTime',
    scopedSlots: { customRender: 'implementationTime' },
  },
  {
    title: '责任人',
    dataIndex: 'dutyPeopleId',
    scopedSlots: { customRender: 'dutyPeopleId' },
  },
  {
    title: '备注',
    dataIndex: 'remarks',
    scopedSlots: { customRender: 'remarks' },
  },
]
export default {
  name:'a'+ Date.now(),
  extends: new BaseEditPage(),
  components: {
    STable,
  },
  data() {
    this.columns = columns
    return {
      // 查询参数
      queryParam: {},
      // 盒子高度
      boxHeight: 0,
      loading: false,
      editModel: 0,
      id: '',
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        return this.editModel != 2
          ? sixMeasures
              .getDetail({
                id: this.id,
              })
              .then((res) => {
                // if(res.code == 200){
                let datas = cloneDeep(res)
                this.form = res.data.projectInfo
                datas.data = res.data.sixMeasuresPlan // 列表对象
                this.sixMeasuresPlan = datas.data
                return datas
                // }
              })
          : {}
        // 深拷贝回调对象
      },
      form: {},
      sixMeasuresPlan: [],
      rules: {
        implementationTime: [{ required: true, message: '请选中实施时间', trigger: 'change' }],
      },
    }
  },
  mounted() {
    this.$route.meta.title = ['新六项措施计划查看', '新六项措施计划编辑', '新六项措施计划添加'][this.editModel]
    // // 盒子自适应高度
    // this.autoHeight()
    // // 监听窗口,设置盒子自适应高度
    // window.addEventListener('resize', () => {
    //   this.autoHeight()
    // })
  },
  methods: {
    // 挂载后盒子的高度
    // autoHeight() {
    //   this.$nextTick(() => {
    //     let top = document.getElementById('tableBox').getBoundingClientRect().top // 树离窗口上边距
    //     this.boxHeight = `calc(100vh - ${top + 100}px`
    //   })
    // },
    // 提交表单
    handleSubmit() {
      let that = this
      let name = ['update', 'create'][that.editModel - 1] // 根据操作切换url地址
      new Promise((resolve, reject) => {
        // 校验实施时间
        this.sixMeasuresPlan.forEach((item, index) => {
          this.$refs['ruleForm_' + item.id].validate((valid) => {
            if (valid && this.sixMeasuresPlan.length == index + 1) {
              resolve(true)
            }
          })
        })
      }).then((res) => {
        // 提交表单
        if (res) {
          let form = {
            id: that.$route.query.id,
            sixMeasuresPlan: this.sixMeasuresPlan.map((res) => {
              res.implementationTimeStart = this.moment(res.implementationTime[0]).format('YYYY-MM')
              res.implementationTimeEnd = this.moment(res.implementationTime[1]).format('YYYY-MM')
              return res
            }),
            projectInfo: that.form,
          }
          that.loading = true
          sixMeasures[name](form)
            .then((res) => {
              // if(res.code == 200){
              that.loading = false
              that.$message.success(['编辑', '添加'][that.editModel - 1] + '成功！')
              that.$multiTab.close()
              // }
            })
            .catch((res) => {
              that.loading = false
            })
        }
      })
    },
  },
}
</script>
<style scoped>
.table-item {
  min-height: 50px;
  display: flex;
  align-items: center;
}
</style>